<template>
   <CommonCard title="今日交易用户数" :value="orderUser|numberFormat">
        <template #chart>
           <v-chart :option="getOption()" autoresize></v-chart>
        </template>
        <template #bottom>
        <div>
            <span>退货率</span>
            <span class="number">{{returnRate}}%</span>
        </div>
        </template>
   </CommonCard>
</template>


<script>
import {mapState}from 'vuex'
export default {
  name: 'TodayUsers',
  computed:{
      ...mapState({
          orderUser: (state) => state.data.reportData.orderUser,
          returnRate: (state) => state.data.reportData.returnRate,
          orderUserTrend: (state) => state.data.reportData.orderUserTrend || [],
          //初始值是underfined 
          orderUserTrendAxis: (state) => state.data.reportData.orderUserTrendAxis ||[]
      })
  },
  methods:{
      getOption(){
          return{
              //x轴
              xAxis:{
                  show:false,
                  data:this.orderUserTrendAxis
              },
              //y轴
              yAxis:{
                  show:false,

              },
              //系列数据
              series:[
                  { 
                      name:'实时交易量',
                      type:'bar',
                      data:this.orderUserTrend,
                      barWidth:'60%',
                      itemStyle:{
                          color:'#389bdc'
                      }
                  }
              ],
              tooltip:{
                //   柱状图默认触发提示方式item
                //   trigger:'item'
              },
              grid:{
                  left:0,
                  top:0,
                  rigth:0,
                  bottom:0
              },
            //   color:'#389bdc'
          }
      }
  }
}
</script>

<style lang="scss"scoped>
</style>